<!DOCTYPE html><html><head><title>20-第二十章-css3 Flex布局</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="20-第二十章-css3-flex布局">20-第二十章-css3 Flex布局</h1>

<p></p>



<h2 id="一flex容器">一、Flex容器</h2>

<p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”任何一个元素都可以指定为Flex布局</p>

<blockquote>
  <p>display:flex | inline-flex 定义弹性伸缩盒容器类型 <br>
  <code>flex</code>   将对象作为块级弹性弹性盒模型。 <br>
   <code>inline-flex</code>      将对象作为内联块级弹性弹性盒模型。</p>
</blockquote>

<p>注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p>

<hr>

<p>容器的属性 以下6个属性设置在Flex容器上</p>

<blockquote>
  <p><code>flex-direction</code> <br>
  <code>flex-wrap</code> <br>
  <code>flex-flow</code> <br>
  <code>justify-content</code> <br>
  <code>align-items</code> <br>
  <code>align-content</code></p>
</blockquote>

<hr>



<p><img longdesc="./1515422617529.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<p>容器默认存在两根轴：水平的<a href="http://www" target="_blank">主轴</a>（main axis）和垂直的<a href="http://www" target="_blank">交叉轴</a>（cross axis）。主轴的开始位置（与边框的交叉点）叫做<a href="http://www" target="_blank">main start</a>，结束位置叫做<a href="http://www" target="_blank">main end</a>； <br>
交叉轴的开始位置叫做cross start，结束位置叫做cross end。 <br>
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>

<hr>



<h4 id="1flex-direction-排列盒子方向">1、flex-direction 排列盒子方向</h4>

<blockquote>
  <p><code>row</code>(默认)：          横向从左到右排列（横向 ）。 <br>
  <code>row-reverse</code>：  对齐方式与row相反。     （倒序排列） <br>
  <code>column</code>：       纵向从上往下排列（纵向）。 <br>
  <code>column-reverse</code>：对齐方式与column相反。     （倒序排列）</p>
</blockquote>



<p><img longdesc="./1515422776141.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h4 id="2flex-wrap-换行方式">2、flex-wrap 换行方式</h4>

<p>flex-wrap：nowrap | wrap | wrap-reverse <br>
控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向</p>

<blockquote>
  <p><code>nowrap</code>（默认）：  flex容器为单行，不换行 <br>
      <code>wrap</code>：     flex容器为多行。超出换行 <br>
      <code>wrap-reverse</code>：反转 wrap 排列。</p>
</blockquote>

<p>（1）nowrap（默认）：不换行。</p>

<blockquote>
  <p><img longdesc="./1515422885142.png" alt="Alt text" title="" type="image/png" class="" src=""></p>
</blockquote>

<p>（2）wrap：换行，第一行在上方。</p>

<blockquote>
  <p><img longdesc="./1515422899105.png" alt="Alt text" title="" type="image/png" class="" src=""></p>
</blockquote>

<p>（3）wrap-reverse：换行，第一行在下方。</p>

<blockquote>
  <p><img longdesc="./1515422914261.png" alt="Alt text" title="" type="image/png" class="" src=""></p>
</blockquote>

<hr>



<h4 id="3flex-flow">3、flex-flow</h4>

<blockquote>
  <p>flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为（row nowrap）</p>
</blockquote>

<hr>



<h4 id="4justify-content-定义了项目在主轴上的对齐方式">4、justify-content   定义了项目在主轴上的对齐方式</h4>

<blockquote>
  <p>justify-content: flex-start | flex-end | center | space-between | space-around; <br>
  <code>flex-start</code>（默认值）：  左对齐 <br>
  <code>flex-end</code>：     右对齐 <br>
  <code>center</code>：           居中 <br>
  <code>space-between</code>：        两端对齐，项目之间的间隔都相等。 <br>
  <code>space-around</code>：     每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
</blockquote>



<p><img longdesc="./1515423105553.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h4 id="5align-items-属性定义项目在交叉轴上如何对齐">5、align-items 属性定义项目在交叉轴上如何对齐</h4>

<blockquote>
  <p>align-items: flex-start | flex-end | center | baseline | stretch; <br>
      具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下 <br>
  <code>flex-start</code>：   交叉轴的起点对齐。 <br>
  <code>flex-end</code>： 交叉轴的终点对齐。 <br>
  <code>center</code>：   交叉轴的中点对齐。 <br>
  <code>baseline</code>:     项目的第一行文字的基线对齐。 <br>
  <code>stretch</code>（默认值）：如果项目未设置宽高或设为auto，将沿交叉轴占满整个容器的高度或宽度。</p>
</blockquote>



<p><img longdesc="./1515423220137.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h4 id="6align-content-属性定义了交叉多根行轴线的对齐方式如果项目只有一根轴线该属性不起作用">6、align-content 属性定义了交叉多根（行）轴线的对齐方式。如果项目只有一根轴线，该属性不起作用</h4>

<p>align-content: flex-start | flex-end | center | space-between | space-around | stretch;</p>

<blockquote>
  <p><code>flex-start</code>：  与交叉轴的起点对齐。 <br>
  <code>flex-end</code>： 与交叉轴的终点对齐。 <br>
  <code>center</code>：       与交叉轴的中点对齐。 <br>
  <code>space-between</code>：    与交叉轴两端对齐，轴线之间的间隔平均分布。 <br>
  <code>space-around</code>： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 <br>
  <code>stretch</code>（默认值）：轴线占满整个交叉轴。在设置了align-items后无效</p>
</blockquote>

<p>多行下的align-content会使align-items失效</p>



<p><img longdesc="./1515423858168.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h2 id="二item项目属性">二、item项目属性</h2>

<p>以下6个属性设置在项目上。</p>

<blockquote>
  <p><code>order</code>        项目排序 <br>
  <code>flex-grow</code> 项目拓展比例 <br>
  <code>flex-shrink</code>   项目缩小比例 <br>
  <code>flex-basis</code>    定义拓展剩余空间前，的交叉轴的宽 <br>
  <code>flex</code>              复合属性 <br>
  <code>align-self</code>    自定义项目align-items</p>
</blockquote>

<hr>



<h4 id="1order属性定义项目的排列顺序数值越小排列越靠前默认为0可以负值">1、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以负值</h4>



<p><img longdesc="./1515424078093.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h4 id="2flex-grownumber-定义项目的放大比例默认为0-即如果存在剩余空间也不放大">2、flex-grow：<code>&lt;number&gt;</code>  定义项目的放大比例，（默认为0） 即如果存在剩余空间，也不放大</h4>

<blockquote>
  <p>子元素的尺寸=父级盒子剩余空间尺寸*子元素的box-grow属性值 / 所有子元素的flex-grow属性值的和</p>
</blockquote>



<p><img longdesc="./1515424118842.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h4 id="3flex-shrink属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小">3、flex-shrink属性定义了项目的缩小比例，（默认为1），即如果空间不足，该项目将缩小。。</h4>

<blockquote>
  <p>元素收缩宽度 =  超出宽度 * 元素收缩比/收缩总比</p>
</blockquote>



<p><img longdesc="./1515424203637.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<p>如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 <br>
负值对该属性无效。</p>

<hr>



<h4 id="4flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main-size浏览器根据这个属性计算主轴是否有多余空间它的默认值为auto">4、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto</h4>

<blockquote>
  <p>值： |  | auto | content <br>
      <code>&lt;length&gt;</code>： 用长度值来定义宽度。不允许负值 <br>
  <code>&lt;percentage&gt;</code>： 用百分比来定义宽度。不允许负值 <br>
  <code>auto</code>：     无特定宽度值，取决于其它属性值，auto的计算规则是 检索一下你是否设置了width（或者height值，取决于flex-<code>direction</code>就会采用这个值，否则的话最后使用的值是 content <br>
  <code>content</code>：      基于内容自动计算宽度</p>
</blockquote>

<hr>



<h4 id="5flex属性是flex-grow-flex-shrink-和-flex-basis的简写默认值为0-1-auto后两个属性可选">5、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选</h4>

<p>flex: none | [ &lt;’flex-grow’&gt; &lt;’flex-shrink’&gt;? || &lt;’flex-basis’&gt; ]</p>

<blockquote>
  <p>该属性有两个快捷值：<code>auto  (1 1 auto)</code>  和 <code>none  (0 0 auto)</code>。 <br>
  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
</blockquote>

<hr>



<h4 id="6align-self-属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch">6、align-self    属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。（默认值为auto），表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</h4>

<blockquote>
  <p>align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;</p>
</blockquote></div></body></html>